<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <script src="../js/jquery-3.7.1.min.js"></script>
    <script src="../js/bootstrap.bundle.js"></script>
    <title>输入组</title>
</head>

<body>
    <div class="container">
        <!-- .input-group用于创建一个输入组，input-group包裹的内容就是一个输入组 -->
        <div class="input-group mt-2">
            <!-- .input-group-prepend用于创建输入组前面的块，可以用来显示文字或者其他组件 -->
            <!-- 这个块的位置实际上跟类名没有关系，只跟div和input标签的位置有关 -->
            <div class="input-group-prepend">
                <!-- .input-group-text用于在输入组内显示文字 -->
                <span class="input-group-text">请输入用户名</span>
            </div>
            <input type="text" class="form-control" placeholder="用户名">
        </div>

        <div class="input-group mt-2">
            <input type="text" class="form-control" placeholder="用户名">
            <!-- .input-group-append用于创建输入组后面的块，可以用来显示文字或者其他组件 -->
            <div class="input-group-append">
                <!-- .input-group-text用于在输入组内显示文字 -->
                <span class="input-group-text">@niit.com</span>
            </div>
        </div>

        <div class="input-group mt-2">
            <div class="input-group-prepend">
                <span class="input-group-text">$</span>
            </div>
            <input type="text" class="form-control" placeholder="US Dollar">
            <div class="input-group-append">
                <span class="input-group-text">.00</span>
            </div>
        </div>
<!-- 带单选框和复选框的输入组 -->
        <div class="row mt-2">
            <div class="col-sm-6">
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text">
                            <input type="checkbox">
                        </span>
                    </div>
                    <input type="text" class="form-control">
                </div>
            </div>
            <div class="col-sm-6">
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text">
                            <input type="radio">
                        </span>
                    </div>
                    <input type="text" class="form-control">
                </div>
            </div>
        </div>
        <hr>
        <!-- 合并两个输入框 -->
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text">
                    你的信息
                </span>
            </div>
            <!-- 同一个输入组内的输入框会被合并起来 -->
            <input type="text" class="form-control" placeholder="姓名">
            <input type="text" class="form-control" placeholder="地址">
        </div>
        <hr>
        <!-- 输入框结合按钮 -->
        <div class="row mt-2">
            <div class="col-sm-5">
                <div class="input-group">
                    <div class="input-group-prepend">
                        <!-- 同一个输入组内相邻的两个按钮会被合并 -->
                        <button type="submit" class="btn btn-primary">提交</button>
                        <button type="reset" class="btn btn-danger">重置</button>
                    </div>
                    <input type="text" class="form-control">
                </div>
            </div>
            <div class="col-sm-7">
                <div class="input-group">
                    <input type="text" class="form-control">
                    <div class="input-group-append">
                        <button type="submit" class="btn btn-primary">提交</button>
                        <button type="reset" class="btn btn-danger">重置</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 输入框结合下拉按钮 -->
        <div class="input-group mt-2">
            <input type="text" class="form-control">
            <div class="input-group-append">
                <button class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown">游戏</button>
                <div class="dropdown-menu">
                    <a href="#" class="dropdown-item">LOL</a>
                    <a href="#" class="dropdown-item">CSGO</a>
                    <a href="#" class="dropdown-item">PUBG</a>
                </div>
            </div>
        </div>
        <!-- 按钮和下拉框分段 -->
        <div class="input-group mt-2">
            <input type="text" class="form-control">
            <div class="input-group-append">
                <button class="btn btn-outline-secondary">游戏</button>
                <button class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown">
                    <span class="sr-only">下拉按钮</span>
                </button>
                <div class="dropdown-menu">
                    <a href="#" class="dropdown-item">LOL</a>
                    <a href="#" class="dropdown-item">CSGO</a>
                    <a href="#" class="dropdown-item">PUBG</a>
                </div>
            </div>
        </div>
        <!-- 控制输入组的大小 -->
        <!-- .input-group-lg用于创建大型输入组 -->
         <div class="input-group input-group-lg mt-2">
            <div class="input-group-prepend">
                <span class="input-group-text">请输入用户名</span>
            </div>
            <input type="text" class="form-control" placeholder="用户名">
        </div>
        <div class="input-group mt-2">
            <div class="input-group-prepend">
                <span class="input-group-text">请输入用户名</span>
            </div>
            <input type="text" class="form-control" placeholder="用户名">
        </div>
        <!-- .input-group-sm用于创建小型输入组 -->
        <div class="input-group input-group-sm mt-2">
            <div class="input-group-prepend">
                <span class="input-group-text">请输入用户名</span>
            </div>
            <input type="text" class="form-control" placeholder="用户名">
        </div>
    </div>
</body>
</html>